<template>
  <div
    class="widgets"
    v-html="val.value"
    :contenteditable="!!val.isEdit"
    @blur="(e) => updateText(e, val.uuid)"
    @contextmenu.prevent.self="(e) => onTxtContextmenu(e, val)"
    :style="{
      cursor:'move',
      position:'absolute',
      left: val.left + 'px' ,
      top:  val.top + 'px',
      width: val.width + 'px',
      minHeight: val.height + 'px',
      zIndex: val.style.zIndex,
      fontSize: val.style.FontSize + 'pt',
      color: val.style.FontColor,
      textAlign: val.style.Alignment,
      fontWeight: val.style.Bold ? 'bold': 'normal'
    }"
  ></div>
</template>

<script>
  // let itemAttr = {
  //   type: 'braid-txt',
  //   isEdit: 0,
  //   title: '收货人手机',
  //   value: '{收货人手机}',
  //   defaultValue: '18982068702',
  //   name: 'buyerPhone'
  // }

  const WIDGET_NAME = 'braid-txt'

  export default {
    name: WIDGET_NAME,
    setting: {
      type: WIDGET_NAME,
      isEdit: true,
      dragable: true, // 是否可拖拽
      resizable: true, // 尺寸是否可变
      width: 120,
      height: 20,
      left: 50,
      top: 0,
      title: '自定义文本',
      value: '自定义文本',
      defaultValue: '自定义文本',
      name: '',
      style: {
        zIndex: 0,
        FontSize: 10,
        FontColor: '#000000',
        Bold: false, // 1代表粗体，0代表非粗体
        Italic: false, // 1代表斜体，0代表非斜体
        Underline: false, // 1代表有下划线，0代表无下划线
        Alignment: 'left', // 对齐方式
        ItemType: 1, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
      },
    },
    props: [
      'val', // 文本对象
    ],
    methods: {
      updateText(e, uuid) {
        let text = e.target.innerHTML
        this.$vptd.commit('updateData', {
          uuid: uuid,
          key: 'value',
          value: text,
        })
      },
      onTxtContextmenu(event, item) {
        this.$contextmenu({
          items: [
            {
              label: "删除",
              icon: "el-icon-delete",
              divided: true,
              onClick: () => {
                this.$vptd.commit('delete', item.uuid)
              }
            },
            {
              label: "返回",
              icon: "el-icon-back",
              onClick: () => {
                window.history.back()
              }
            },
            {
              label: "重新加载",
              icon: "el-icon-refresh",
              onClick: () => {
                window.location.reload()
              }
            },
          ],
          event, // 鼠标事件信息
          customClass: "custom-class", // 自定义菜单 class
          zIndex: 1000, // 菜单样式 z-index
          minWidth: 230 // 主菜单最小宽度
        });
        return false;
      },
    },
  }
</script>

